<template>
  <div class="container">
    <el-form
      ref="addSkillForm"
      :rules="rules"
      :model="AddSkill"
      label-width="80px"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input
          v-model="AddSkill.title"
          placeholder="请输入文章标题"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章内容" prop="articleBody">
        <quill-editor
          ref="myQuillEditor"
          v-model="AddSkill.articleBody"
          :options="editorOption"
          style="width:100%;height:200px;marginBottom:50px"
        />
      </el-form-item>
      <el-form-item label="视频地址" prop="videoURL">
        <el-input
          v-model="AddSkill.videoURL"
          placeholder="请输入视频地址"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <span slot="footer">
        <el-button @click="cancelAddSkill">取 消</el-button>
        <el-button type="primary" @click="confirmAddSkill">确 定</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import { add as addArtical, update } from '@/api/hmmm/articles'
import hljs from 'highlight.js'
import 'highlight.js/styles/tomorrow.css'
export default {
  props: {
    editData: {
      type: Object,
      default: function data(title, articleBody, videoURL) {
        var obj = new Object()
        //向对象添加属性
        obj.title = title
        obj.articleBody = articleBody
        obj.videoURL = videoURL
        obj.id = null
        return obj
      }
    }
  },
  data() {
    return {
      // 添加技巧数据
      AddSkill: {
        title: this.editData.title,
        articleBody: this.editData.articleBody,
        videoURL: this.editData.videoURL,
        id: this.editData.id
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        videoURL: [
          { require: false },
          {
            pattern: /\.(asx|wvx|mpe|mpa|mpg|mpg|mpeg|avi|rm|rmvb|mov|wmv|asf|dat|VCD)$/,
            message: '视频格式不正确',
            trigger: 'blur'
          }
        ]
      },
      // 富文本编辑器
      editorOption: {
        // 富文本编辑器配置
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], //列表
            ['code-block', 'blockquote'], //引用，代码块
            ['image', 'link'] //上传图片、上传视频
          ],
          syntax: {
            highlight: text => hljs.highlightAuto(text).value
          }
        },
        theme: 'snow'
      }
    }
  },
  methods: {
    // 取消新增
    cancelAddSkill() {
      this.$refs.addSkillForm.resetFields()
      this.$emit('close')
    },
    // 新增技巧
    confirmAddSkill() {
      this.$refs.addSkillForm.validate(async valid => {
        if (!valid) {
          this.$message.error('添加失败,请重新添加')
        } else {
          // 判断当前时添加还是修改
          if (!this.editData.id) {
            const data = await addArtical(this.AddSkill)
            if (data.status !== 200) {
              this.$message.error('添加失败，请重新添加')
            } else {
              this.$emit('getArticlesListAgin')
              this.$message.success('添加成功')
            }
          } else {
            const data = await update(this.AddSkill)
            // console.log(data)
            if (data.status !== 200) {
              this.$message.error('修改失败，请重试')
            } else {
              this.$emit('getArticlesListAgin')
              this.$message.success('修改成功')
            }
          }
          this.$emit('close')
          this.$refs.addSkillForm.resetFields()
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .dialog-footer {
  text-align: right;
}
</style>
